<template>
	<scroll-view style=" height: 100vh;padding-top: 40px;" @scrolltolower="lowerBottom" scroll-y="true" refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<view class="bg-white nav text-center" style="width: 100vw;display: flex;justify-content: space-evenly;">
			<view style="display: flex;height: 6vh;align-items: center">
				<view style="margin-right: 1vw;" @click="TabCur=0">
					<button class="cu-btn block " :class="TabCur==0?'bg-red':'bg-gray'">

						<text class="cuIcon-all"></text> 展示所有
					</button>
				</view>
				<view @click="TabCur=1">
					<button class="cu-btn block " :class="TabCur==1?'bg-red':'bg-gray'">
						<text class="cuIcon-wefill"></text> 猜你喜欢
					</button>
				</view>
			</view>

		</view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus='this.ifshowSecelct=true' :adjust-position="false" type="text" placeholder="请输入搜索关键词"
					confirm-type="search" v-model="msg" />
			</view>
			<view class="action">
				<button class="cu-btn bg-cyan shadow-blur" @tap="onClick">搜索</button>
			</view>
		</view>


		<van-tree-select :items="items" :main-active-index="mainActiveIndex"
			:active-id.sync="mainActiveIndex==0?time:(mainActiveIndex==1?day:place)" @click-nav="onClickTreeNav"
			@click-item="onClickTreeItem" height='150px' v-if="ifshowSecelct" />
		<view style="width: 100vw;height: 2vh;">

		</view>
		<view v-if="TabCur==0">
			<van-empty description="暂无相关" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="mesList.length==0" />
			<view v-for="(item,index) in mesList" :key="index" style="position: relative;" v-else>
				<message :content='item.content' :posterid='item.posterid' :type='item.type' :title='item.title'
					:time='item.time' :avatar='item.avatar'></message>
			</view>
		</view>
		<view v-else-if="TabCur==1">
			<van-empty description="暂无相关" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="rec_list.length==0" />
			<view v-for="(item,index) in rec_list" :key="index" style="position: relative;" v-else>
				<message :content='item.content' :posterid='item.posterid' :type='item.type' :title='item.title'
					:time='item.time' :avatar='item.avatar'></message>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		showAllpost,
		getTags,
		getreclist
	} from '@/store/api.js'
	import {
		truncateString,
	} from '@/store/constants.js'
	import message from '@/modul/Search/messagelist.vue'
	export default {
		components: {
			message
		},
		mounted() {
			getTags().then(res => {
				console.log(res)
				console.log('看这里')
				res.data.data.forEach(item => {
					let temp = {
						text: item.name,
						id: item.id
					}
					this.items[2].children.push(temp)
				})
			}).catch(err => {
				console.log(err)
			})
			uni.$on('showsearch', (value) => {
				this.ifshowSecelct = value;
			});
			//获取推荐
			getreclist(this.count).then(res => {
				console.log('获取推荐')
				console.log(res)
				this.count = this.count + 20
				res.data.data.forEach(item => {
					this.rec_list.push({
						posterid: item.id,
						avatar: item.posterAvatar,
						type: JSON.stringify(item.tags),
						content: item.content,
						title: item.title,
						time: item.beginTime
					})
				})
			}).catch(err => {
				console.log(err)
			})

			//获取所有
			let data = {
				pageNum: 1,
				pageSize: 20,
				tagId: '',
				q: ''
			}
			showAllpost(data).then(res => {
				this.total = res.data.data.total
				this.nowdata.pageNum++
				res.data.data.rows.forEach(item => {
					this.mesList.push({
						posterid: item.id,
						avatar: item.posterAvatar,
						type: JSON.stringify(item.tags),
						content: item.content,
						title: item.title,
						time: item.beginTime
					})
				})
			})
		},
		data() {
			return {
				count: 1,
				rec_list: [],
				TabCur: 0,
				scrollLeft: 0,
				triggered: false,
				total: 0,
				nowdata: {
					pageNum: 1,
					pageSize: 20,
				},
				page: 1,
				values: '',
				mainActiveIndex: 0,
				time: '',
				place: '',
				day: '',
				mesList: [],
				ifshowSecelct: false,
				max: 2,
				msg: '',
				items: [{
						text: '时间',
						children: [{
								text: '00:00-04:00',
								id: 13
							},
							{
								text: '04:00-08:00',
								id: 14
							},
							{
								text: '08:00-12:00',
								id: 15
							},
							{
								text: '12:00-16:00',
								id: 16
							},
							{
								text: '16:00-20:00',
								id: 17
							},
							{
								text: '20:00-0:00',
								id: 18
							}
						]
					},
					{
						text: '日期',
						children: [{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() > 9 ? new Date().getDate() :
										`0${new Date().getDate()}`),
								id: 19
							},
							{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() + 1 > 9 ? new Date().getDate() + 1 :
										`0${new Date().getDate()+1}`),
								id: 20
							},
							{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() + 2 > 9 ? new Date().getDate() + 2 :
										`0${new Date().getDate()+2}`),
								id: 21
							},
							{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() + 3 > 9 ? new Date().getDate() + 3 :
										`0${new Date().getDate()+3}`),
								id: 22
							},
							{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() + 4 > 9 ? new Date().getDate() + 4 :
										`0${new Date().getDate()+4}`),
								id: 23
							},
							{
								text: (new Date().getFullYear()) + '-' + ((new Date().getMonth() + 1) > 9 ?
										(
											new Date().getMonth() + 1) : `0${(new Date().getMonth()+1)}`) +
									'-' + (
										new Date().getDate() + 5 > 9 ? new Date().getDate() + 5 :
										`0${new Date().getDate()+5}`),
								id: 24
							}
						]
					},
					{
						text: '活动类型',
						children: []
					}
				]
			};
		},
		methods: {
			onRestore() {
				console.log('onRestore')
				this.TabCur = 0
				this.count = 0
				this.triggered = true
				this.total = 0
				this.nowdata = {
					pageNum: 1,
					pageSize: 20
				}
				this.page = 1
				this.values = ''
				this.mainActiveIndex = 0
				this.time = ''
				this.place = ''
				this.day = ''
				this.mesList = []
				this.ifshowSecelct = false
				this.max = 2
				this.msg = ''
				getreclist(this.count).then(res => {
					console.log('获取推荐')
					console.log(res)
					this.count = this.count + 20
					res.data.data.forEach(item => {
						this.rec_list.push({
							posterid: item.id,
							avatar: item.posterAvatar,
							type: JSON.stringify(item.tags),
							content: item.content,
							title: item.title,
							time: item.beginTime
						})
					})
				}).catch(err => {
					console.log(err)
				})
				getTags().then(res => {
					console.log(res)
					console.log('看这里')
					console.log(this.items[2].children)
					res.data.data.forEach(item => {
						let temp = {
							text: item.name,
							id: item.id
						}
						this.items[2].children.push(temp)
					})
				}).catch(err => {
					console.log(err)
				})
				let data = {
					pageNum: 1,
					pageSize: 20,
					tagId: '',
					q: ''
				}
				showAllpost(data).then(res => {
					this.total = res.data.data.total
					// console.log(res)
					res.data.data.rows.forEach(item => {
						this.mesList.push({
							posterid: item.id,
							avatar: item.posterAvatar,
							type: JSON.stringify(item.tags),
							content: item.content,
							title: item.title,
							time: item.beginTime,
						})
					})
				})
				setTimeout(() => {
					console.log('刷新完成')
					this.triggered = false
				}, 1000)
			},
			Sear(e) {
				e.detail = ''
			},
			onClick() {
				console.log(this.msg)
				this.ifshowSecelct = false
				uni.showLoading({
					title: '搜索中'
				})
				let data = {}
				if (this.day != '') {
					let D = this.items[1].children[Number(this.day) - 19].text
					if (this.time == '') {
						data = {
							pageNum: 1,
							pageSize: 20,
							tagId: this.place,
							q: this.msg,
							beginTime: D + 'T' + '00:00:00.000+00:00',
							endTime: D + 'T' + '23:59:59.000+00:00',
						}
					} else {
						let T = this.items[0].children[Number(this.time) - 13].text
						data = {
							pageNum: 1,
							pageSize: 20,
							tagId: this.place,
							q: this.msg,
							beginTime: D + 'T' + T.substring(0, 2) + ':00:00.000+00:00',
							endTime: D + 'T' + T.substring(6, 8) + ':00:00.000+00:00'
						}
					}
				} else {
					data = {
						pageNum: 1,
						pageSize: 20,
						tagId: this.place,
						q: this.msg
					}
				}
				showAllpost(data).then(res => {
					this.total = res.data.data.total
					this.nowdata = data
					this.nowdata.pageNum++
					this.mesList = []
					setTimeout(() => {
						res.data.data.rows.forEach(i => {
							this.mesList.push({
								posterid: i.id,
								avatar: i.posterAvatar,
								type: JSON.stringify(i.tags),
								content: i.content,
								title: i.title,
								time: i.beginTime,
							})
							console.log(this.mesList)
						})
						uni.hideLoading()
					})

				})
				this.day = ''
				this.place = ''
				this.time = ''
				this.TabCur = 0
			},
			lowerBottom() {
				// if (this.total > this.mesList.length) {
				// 	console.log('触底刷新')
				// 	let data = this.nowdata

				// 	showAllpost(data).then(res => {
				// 		console.log(res.data.data.rows)
				// 		this.nowdata.pageNum++
				// 		console.log(data)
				// 		res.data.data.rows.forEach(item => {
				// 			this.mesList.push({
				// 				posterid: item.id,
				// 				avatar: item.posterAvatar,
				// 				type: JSON.stringify(item.tags),
				// 				content: item.content,
				// 				title: item.title,
				// 				time: item.beginTime
				// 			})
				// 		})
				// 	})
				// } else {
				// 	uni.showToast({
				// 		duration: 1000,
				// 		title: '没有更多了',
				// 		icon: 'none'
				// 	})
				// }

				console.log('下拉刷新')
				console.log(this.skin)
				if (this.TabCur == 0) {
					if (this.total > this.mesList.length) {
						let data = this.nowdata
						console.log(data)
						showAllpost(data).then(res => {
							console.log(res.data.data.rows)
							this.nowdata.pageNum++
							console.log(data)
							res.data.data.rows.forEach(item => {
								this.mesList.push({
									posterid: item.id,
									avatar: item.posterAvatar,
									type: JSON.stringify(item.tags),
									content: item.content,
									title: item.title,
									time: item.beginTime
								})
							})
						})
					} else {
						uni.showToast({
							duration: 1000,
							title: '没有更多了',
							icon: 'none'
						})
					}
				} else {
					getreclist(this.count).then(res => {
						console.log('获取推荐')
						console.log(res)
						this.count = this.count + 20
						res.data.data.forEach(item => {
							this.rec_list.push({
								posterid: item.id,
								avatar: item.posterAvatar,
								type: JSON.stringify(item.tags),
								content: item.content,
								title: item.title,
								time: item.beginTime
							})
						})
					}).catch(err => {
						console.log(err)
					})
				}

			},
			onChange(e) {
				console.log(e)
				this.msg = e
			},
			onClickTreeNav(event) {
				console.log(event)
				this.mainActiveIndex = event || 0;
			},
			onClickTreeItem(event) {
				console.log(event)
				const detail = event || {};
				if (detail.id >= 13 && detail.id < 19)
					this.time = detail.id
				else if (detail.id < 13) {
					this.place = detail.id
				} else {
					this.day = detail.id
				}
			}

		}
	};
</script>

<style scoped>
	.box {
		margin-bottom: 30rpx;
	}

	.select {
		background-color: skyblue !important;
	}
</style>